<template>
  <div id="header-inner">
    <h2>个人博客</h2>
    <ul>
      <li @click="indexClick">
        <img src="@/assets/icon/home.svg" alt=""/>
        首页
      </li>
      <li @click="categoryClick">
        <img src="@/assets/icon/category.svg" alt=""/>
        分类
      </li>
      <li @click="aboutClick">
        <img src="@/assets/icon/about.svg" alt=""/>
        关于
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HeaderInner",
  methods: {
    indexClick() {
      this.$router.push("/blogs").catch(err => err);
    },
    categoryClick() {
      this.$router.push("/blog/category").catch(err => err);
    },
    aboutClick() {
      this.$router.push("/blog/about").catch(err => err);
    }
  }
}
</script>

<style scoped>
  ul {
    list-style: none;
  }

  #header-inner {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  }

  #header-inner h2 {
    height: 75px;
    line-height: 75px;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.9);
  }

  #header-inner ul {
    margin: 10px 0;
  }

  #header-inner ul li {
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    /*background-color: #00a4ff;*/
  }



  #header-inner ul li:hover {
    background-color: #00a4ff;
  }

  #header-inner ul li:hover {
    background-color: rgba(187, 187, 187, 0.9);
    cursor: pointer;
  }

  #header-inner ul li img {
    height: 40%;
    margin: 0 5px 0 20px;
  }

  /*#header-inner .list img {*/
  /*  height: 40%;*/
  /*  margin: 0 5px 0 20px;*/
  /*}*/

</style>